<template>
    <div id="sBody">
        <el-row class="row">
        <el-col :span="6" class="col">
            <div class="tLeft">
                <div class="logo">LOGO</div>
               <!-- <div class="guestInfo">
                    <img class="guestPic">
                    <div class="guestName">mornin` sir</div>
                </div>-->
                <el-row class="info">
                   <el-col  :span="7"><div class="guestPic"></div></el-col>
                   <el-col  :span="14"><div class="guestText"><p>XX同学，早上好！</p><p>1440624150</p></div></el-col>
               </el-row>

            <div id="control">
                <el-row class="cRow">
                   <el-col :span="16"><div class="div1" >班级列表</div></el-col>
                </el-row>
            </div>

           <div id="lTitle">
                <el-row class="tRow">
                   <el-col :span="3" class="div4"  ><div >编号</div></el-col>
                   <el-col :span="4"  class="div5"><div >名称</div></el-col>
                </el-row>
            </div>

            <ul id="classList">
                <li v-for="(i,index) in tClasses">
                    <el-row class="classRow">
                       <el-col :span="3"><img></el-col>
                       <el-col :span="9" >{{i.num}}</el-col>
                       <el-col :span=11>{{i.name}}</el-col>
                   </el-row>
                </li>
            </ul> 
            </div>
        </el-col>

        <el-col :span="18">
            <div class="tRight">
                <div id="rTitle">
                    学生信息
                </div>

            <el-row class="rRow">
                   <el-col :span="16" class="M"  >
                       <p>最新发布</p>
                       <el-row class="detail">
                              <el-col :span="7" style="margin-top:0px;margin-left:4%;">
                                  <div class=dTtile>
                                      <p>新媒体技术实训实验一</p>
                                      <p>5月2号前上交</p>
                                      <p>这是作业说明</p>
                                  </div>
                                  <div class="dContent">
                                      <span class="qw">附录</span><a href="#">实验素材</a>
                                  </div>
                              </el-col>
                              <el-col :span="7"  style="margin-top:0px;margin-left:4%;">
                                  <div class=dTtile>
                                      <p>新媒体技术实训实验一</p>
                                      <p>5月2号前上交</p>
                                      <p>这是作业说明</p>
                                  </div>
                                  <div class="dContent">
                                      <span class="qw">附录</span><a href="#">实验素材</a>
                                  </div>
                              </el-col>
                             <el-col :span="7"  style="margin-top:0px;margin-left:4%;">
                                 <div class=dTtile>
                                      <p>新媒体技术实训实验一</p>
                                      <p>5月2号前上交</p>
                                      <p>这是作业说明</p>
                                  </div>
                                  <div class="dContent">
                                      <span class="qw">附录</span><a href="#">实验素材</a>
                                  </div>
                             </el-col>
                      </el-row>
                   </el-col>
                   <el-col :span="5" class="S"   >
                       <div class="recordsTitle">我的作业</div>
                       <ul>
                           <li v-for="(i,index) in records" class="rC">
                               <el-row>
                                   <el-col :span="4">1</el-col>
                                   <el-col :span="15">{{i}}</el-col>
                               </el-row>
                           </li>
                           
                       </ul>
                       
                   </el-col>
            </el-row>

            <el-table class="rTable" max-height="370" height="650" ref="multipleTable"  :data="tableData3" border tooltip-effect="dark" style="width: 100%" row-class-name="abc" @selection-change="handleSelectionChange">
                <el-table-column  type="selection" width="55">
                </el-table-column>
                <el-table-column   label="学号" width="150">
                    <template scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column  prop="name"  label="姓名"  width="120">
                </el-table-column>
                <el-table-column prop="address" label="作业"  show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="" label="操作" fixed="right"  width="67" show-overflow-tooltip>
                    <template scope="scope">
                        <el-button type="text" size="small">下载</el-button>
                    </template>
                </el-table-column>
           </el-table>
          
           <el-row class="rControl">
               <el-col :span="2" id="rControl1"><img></el-col>
               <el-col :span="2" id="rControl2"><img></el-col>
           </el-row >
            </div>

            
        </el-col>
       </el-row>
    </div>
</template>
<script>
export default {
        data() {
            return {
                tClasses:{
                    class00:{
                        num:"OL",
                        name:"新媒体技术实训"
                    },
                     class01:{
                        num:"KY",
                        name:"Node.js"
                    },
                     class02:{
                        num:"SL",
                        name:"移动媒体开发"
                    },
                     class03:{
                        num:"FH",
                        name:"javascript基础"
                    },
                },
                records:[
                    "项目需求文档",
                    "项目概要设计",
                    "项目详细设计",
                    "项目总结"
                ],
          tableData3: [{
          date: '1440624150',
          name: '黄宋杰',
          address: '作业一（项目需求文档）'
        },
         {
          date: '1440624149',
          name: '刘东明',
          address: '作业一（项目需求文档）'
        }, 
        {
          date: '1440624148',
          name: '李集钦',
          address: '作业一（项目需求文档）'
        }, 
        {
          date: '1440624147',
          name: '李峻腱',
          address: '作业一（项目需求文档）'
        }, 
        {
          date: '1440624146',
          name: '高伟廷',
          address: '作业一（项目需求文档）'
        },
         {
          date: '1440624150',
          name: '黄宋杰',
          address: '作业一（项目需求文档）'
        }, 
        {
          date: '1440624149',
          name: '刘东明',
          address: '作业一（项目需求文档）'
        },
        {
          date: '1440624158',
          name: '李集钦',
          address: '作业一（项目需求文档）'
        },
        {
          date: '1440624157',
          name: '李峻腱',
          address: '作业一（项目需求文档）'
        },
        {
          date: '1440624146',
          name: '高伟廷',
          address: '作业一（项目需求文档）'
        },
        
        ],
        multipleSelection: []
                }
            },

        methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
    }
</script>
<style>
#sBody{
    width: 980px;
    padding-top: 2%;
    margin-left: auto;
    margin-right: auto;
    
}
#sBody ul{
    list-style: none;
    padding: 0
}
   #sBody .row {
    margin-top: 0%;
    margin-left: 0%;
    width: 100%;
    &:last-child {
      margin-bottom: 0;
    }
  }
 #sBody .col {
  
   background: gray;
   height: 643px;
  }
 #sBody  .tLeft{
      width: 100%;
      height: 100%;
      background-color: #535353;
  }
#sBody  .logo{
      width: 100%;
      height: 13%;
      background-color: #535353;
      box-shadow: inset 0 0 50px 1px black;
      color:#bfbfbf;
      font-size: 200%;
      padding-top: 10%;
      text-align: center;
      
      
  }
  #sBody .guestInfo{
      width: 100%;
      height:25%;
      background-color: yellow;
  }
  #sBody .guestPic{
      width: 100%;
      height:80px;
      margin-left: 10%;
      background-color: #eeeeee;
  }
 #sBody   .guestText{
      width: 100%;
      height:70px;
      margin-left: 15%;
      color: #eeeeee;
  }
#sBody  .info{
      padding-top:5%;
      background-color: #313131;
      height: 20%;
      margin-bottom: 0;
      padding-bottom: 43%;
      box-shadow: inset 0 4px  10px black;
  }
  #control{
      
      width: 100%;
      height: 6%;
      background-color: #a0a0a0;
  }
#sBody  .cRow{
      padding-top: 3%;
  }
  #control .div1{
      width:100%;
      height: 100%;
      margin-left: 3%;
      font-size: 120%;
      color: #eeeeee
  }
   #control .div2{
      width:60%;
      height: 100%;
      margin-left: 3%;
      background-color: #eeeeee
  }
   #control .div3{
      width:60%;
      height: 100%;
      margin-left: 3%; 
       background-color: #eeeeee
  }
#sBody  .tRow{
      padding-top: 3%;
      margin-bottom: 5%;
  }
#sBody  .classRow{
      padding-left: 3%
  }
#sBody  .classRow img{
      width: 50%;
      height:15px;
      background-color: #eeeeee
  }
 #sBody  .div4{
      border-right: 2px solid #eeeeee;
      width: 50%;
      text-align: center;
      font-size: 120%;
      color: #eeeeee;
  }
 #sBody   .div5{
      width: 50%;
     text-align: center;
      font-size: 120%;
      color: #eeeeee;
  }

  #classList{
      list-style: none;
      margin: 0%;
      padding:0%;
      overflow: hidden;
  }
  #classList li{
     color: #eeeeee;
     overflow: hidden;
     height:25px;
     font-size: 80%;
  }
#classList li .el-col{
    overflow: hidden;
    margin-left: 1%;
    font-size: 140%
}
#issueIcon{
    position: absolute;
    height: 4.5%;
    width:5%;
    bottom: 0px;    
    padding-bottom:0px;
    padding-left:15px;
}
#issueIcon img{
    background-color: #eeeeee;
    width:60%;
    height:20px;
}
#issue{
    position: absolute;
    height: 5%;
    width:25%;
    bottom: 0px;
    color: #eeeeee;
    margin-left: 5%;
    font-size: 120%;
    
}
#sBody .row .tRight{
      width: 100%;
      height: 643px;
      background-color: #f9f9f9;
      margin-left: 0%
  }
#rTitle{
    font-size: 160%;
    margin-left: 3%;
    padding-top: 1%;
    color:#6f6f6f
}
#sBody .S{
    margin-top: 1%;
    margin-left: 3%;
    height:15px;
    margin-bottom: 1.5%;
    
}
#sBody .rRow .M{
    margin-top: 1%;
    margin-left: 3%;
    height: 160px;
    margin-bottom: 1.5%;
   
}
#sBody  .rRow .M li{
    margin-top: 0;
    margin-bottom: 0
}
.stuInfo .el-col{
    height: 50px;
    
    margin-left:4%;
    padding: 0%
}
.stuInfo img{
    width: 100%;
    height: 55px;
    background-color:black;
    margin-left:4%;
    padding: 0%
}
.nm{
    margin: 0%;
    padding: 0%;
    font-size: 120%;
}
 .num{
    color:#a0a0a0;
    font-size: 90%;
    line-height: 13px;
}
.cls{
        color:#a0a0a0;
        font-size: 90%;
}
#sBbody .el-table{
    margin-top: 20%;
}
#sBody .detail .el-col{
    margin-top: 0%;
    height: 150px;
    text-align: center;
    border-radius:10px;
    box-shadow: 2px 2px 3px #cccccc;
    border: 1px solid black ;
    
    
}
 #sBody  .dTtile{
    width: 80%;
    border-bottom: white 1px solid;
    margin-left:auto;
    margin-right: auto;
    padding-top: 2%;
    padding-bottom: 0%;
    font-size: 100%; 
    padding-top:6%;
}
#sBody .dContent{
    
    padding-top: 0%;
    border-top: 1px solid black;
    width: 80%;
    margin-left: 10%;
}
#sBody .dContent a{
    
    display: block;
    font-size: 10%;
    margin-left: 27%;
    margin-top: 3%;
    width: 50%
}
#sBody .dContent .qw{
text-align: left;
    display: block;
    padding-top:0px;
    font-size: 10%;
    font-weight: bold;
    margin-top: 1%;
    width: 50%;
    margin-left: 1%;
}
 #sBody .recordsTitle{
     width: 80%;
     color:#737373;
     margin-left:auto;
     margin-right: auto;
     margin-bottom: 4%;
     padding-top: 2%;
     padding-bottom: 4%;
     font-size: 115%;
    
}
.rC{
    margin-left: 5%;
    margin-bottom: 4%;
    color: #737373;
    font-size: 90%;
    overflow: hidden;
    width: 100%
}
.el-icon-more{
    padding-top: 0%;
    line-height: 0;
    font-size: 150%;
    margin-left: 5%;
    color:#737373;
    background-color: black;
}
 #sBody .rControl1 img{
    bottom: 0px;
    width: 80%;
    height: 30px;
    background-color: white;
}
 #sBody .rControl2 img{
    bottom: 0px;
    width: 80%;
    height: 30px;
    background-color: white;
}
 #sBody .rControl{
    position: absolute;
    padding-left: 3%;
    width:75%;
    bottom: -20px;
    background-color: #e5e5e5;
}

</style>